<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>YAML | Example &quot;fullpage_3col&quot;</title>
<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="../css/advanced2/layout_3col_standard.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="../css/advanced2/patches/patch_3col_standard.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="../js/aider.js"></script>
<script type="text/javascript" src="../js/s.js"></script>
</head>
<body>
<!-- skip link navigation -->
<ul id="skiplinks">
	<li><a class="skip" href="#nav">Skip to navigation (Press Enter).</a></li>
	<li><a class="skip" href="#col3">Skip to main content (Press Enter).</a></li>
</ul>

<div id="header" role="banner">
  <div class="page_margins">
    <div class="page">
      <div id="topnav" role="contentinfo">
        <span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span>
      </div>
      <h1>Example | Beispiel <em>&laquo;fullpage_3col&raquo;</em></h1>
      <span>YAML &#8226; (X)HTML/CSS Framework</span>
    </div>
  </div>
</div>

<!-- begin: main navigation #nav -->
<div id="nav" role="navigation">
  <div class="page_margins">
    <div class="page">
      <div class="hlist">
        <ul>
          <li><a href="../index.html">Table Of Contents</a></li>
          <li><a href="fullpage_grids.html">Next Example</a></li>
          <li><a href="../06_layouts_advanced/equal_height_boxes.html">Previous Example</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- end: main navigation -->

<!-- begin: main content area #main -->
<div id="main">
  <div class="page_margins">
    <div class="page">
      <!-- begin: #col1 - first float column -->
      <div id="col1" role="complementary">
        <div id="col1_content" class="clearfix">
          <div class="info">
          <h2>About this example</h2>
          <p>This example duplicates the standard layout <em><a href="../01_layouts_basics/3col_standard.html">&laquo;3col_standard&raquo;</a></em> except for the multiple use of the containers <code>.page_margins</code> and <code>.page</code>.</p>
          <p>Take a look into the HTML source for more information about the structural changes  to create this kind of full-page layout or read the <a href="http://www.yaml.de/en/documentation/basics/xhtml-source-code.html">documentation</a>.</p>
          <p>Within the content area you have the same options for ordering and styling your columns. </p>
          </div>
		  <div class="info">
          <h2>仿口风琴(Accordion)效果</h2>
			<div id="idSlideView3" class="sv3">
			<dl>
				<dt> 图片放大效果 </dt>
				<dd>这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。
				   好处是能在原图附近对图片进行局部放大查看，而且可以通过鼠标控制查看的部位。 <a href="http://www.cnblogs.com/cloudgamer/archive/2010/04/01/ImageZoom.html"> 查看全文 </a> </dd>
			</dl>
			<dl>
				<dt> Lazyload 延迟加载效果 </dt>
				<dd> Lazyload是通过延迟加载来实现按需加载，达到节省资源，加快浏览速度的目的。
				    网上也有不少类似的效果。 <a href="http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html"> 查看全文 </a> </dd>
			</dl>
			<dl>
				<dt> 图片上传预览效果 </dt>
				<dd> 图片上传预览是一种在图片上传之前对图片进行本地预览的技术。
				    使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 <a href="http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html"> 查看全文 </a> </dd>
			</dl>
			<dl>
				<dt> Tween算法及缓动效果 </dt>
				<dd> Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。
				    我这里要教大家的是怎么利用flash的Tween类的算法，来做js的Tween算法。 <a href="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html"> 查看全文 </a> </dd>
			</dl>
			<dl>
				<dt> Table行定位效果 </dt>
			    <dd> 近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。 <a href="http://www.cnblogs.com/cloudgamer/archive/2009/05/18/TableFixed.html"> 查看全文 </a> </dd>
			</dl>
			</div>
          </div>
        </div>
      </div>
      <!-- end: #col1 -->
      <!-- begin: #col2 second float column -->
      <div id="col2" role="complementary">
        <div id="col2_content" class="clearfix">
          <h2>Column  #col2</h2>
          <p>Integer condimentum, justo a venenatis vulputate, enim pede porttitor eros, non   pretium lorem orci id tortor. Nulla a ligula. Mauris nulla arcu, luctus vel,   consequat non, luctus eu, nisi. Mauris volutpat, nunc eget pretium blandit,   ligula quam commodo nisl, ac fermentum nibh pede et nulla. In condimentum   bibendum nisi. Vestibulum risus. </p>
          <p>Nullam placerat varius nibh. Quisque tellus   sapien, placerat sed, aliquam sit amet, scelerisque sit amet, nisi. Pellentesque   eget leo vitae felis laoreet dictum. Duis pellentesque porttitor sapien. Fusce   leo. Nulla leo. Donec mattis, justo nec gravida euismod, massa mi posuere   mauris.</p>
        </div>
      </div>
      <!-- end: #col2 -->
      <!-- begin: #col3 static column -->
      <div id="col3" role="main">
        <div id="col3_content" class="clearfix">
          <h2>Column  #col3</h2>
		    图片滑动展示效果：
			<br />
			<ul id="idSlideView2" class="sv2">
			<li>
				<div><a href="http://www.google.com.hk">内裤蛋糕</a>
				神秘浪漫的内裤蛋糕礼盒</div>
				<img src="images/ad2/o_1.jpg">
			</li>
			<li>
				<div><a href="http://www.google.com.hk">内裤蛋糕</a>
				送给最亲密的TA~~</div>
				<img src="images/ad2/o_2.jpg">
			</li>
			<li>
				<div><a href="http://www.google.com.hk">内裤蛋糕</a>
				超SWEET~~打开漂亮的礼品盒，甜蜜可爱的蛋糕呈现眼前</div>
				<img src="images/ad2/o_3.jpg">
			</li>
			<li>
				<div><a href="http://www.google.com.hk">内裤蛋糕</a>
				好Q哦！慢慢解开丝带，竟然是一条条漂亮的内裤</div>
				<img src="images/ad2/o_4.jpg">
			</li>
			<li class="last">
				<div><a href="http://www.google.com.hk">内裤蛋糕</a>
				超级SWEET又脸红耶！！！</div>
				<img src="images/ad2/o_5.jpg">
			</li>
			</ul>
			<br />
			<br />
			<ul id="idSlideView" class="sv">
			<li style="background-color:#D32226;"> <span>0</span> <span class="bottom">0</span> </li>
			<li style="background-color:#89C73E;"> <span>1</span> <span class="bottom">1</span> </li>
			<li style="background-color:#875FBE;"> <span>2</span> <span class="bottom">2</span> </li>
			<li style="background-color:#5C7CDA;"> <span>3</span> <span class="bottom">3</span> </li>
			<li style="background-color:#E7AD00;"> <span>4</span> <span class="bottom">4</span> </li>
			</ul>			
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus.</p>
          <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. Integer   congue nisl in mauris. Ut risus diam, ornare eget, interdum id, tincidunt at,   eros.</p>
          </blockquote>
          <p>Nulla vitae mauris. Phasellus vel ligula quis dolor bibendum egestas. Duis a   massa ut orci varius placerat. Sed leo nulla, tempor nec, commodo in, fringilla   vel, nibh. Cras nibh. Pellentesque venenatis felis. Cum sociis natoque penatibus   et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum fringilla   gravida nunc. Mauris neque. Cras gravida metus eget sapien. Sed faucibus, turpis   ut pretium hendrerit, turpis mauris scelerisque tellus, vel convallis metus   massa in neque.</p>
        </div>
        <div id="ie_clearing">&nbsp;</div>
        <!-- End: IE Column Clearing -->
      </div>
      <!-- end: #col3 -->
    </div>
  </div>
</div>
<!-- end: #main -->

<!-- begin: #footer -->
<div id="footer" role="contentinfo">
  <div class="page_margins">
    <div class="page">
      Footer with copyright notice and status information<br />Layout based on <a href="http://www.yaml.de/">YAML</a>
    </div>
  </div>
</div>
<!-- full skiplink functionality in webkit browsers -->
<script type="text/javascript">
(function(){
	function $$(id){
		return "string" == typeof id ? 
				document.getElementById(id) : id;
	}
	
	var container = $$("idSlideView"),
		show = $$("idShow"),
		options = {},
		sv = mooluBM(container, options);
		
	var options = {
			tip : true,
			auto : true,
			mode : "right"
		},
		sv = mooluBM($$("idSlideView2"), options);
		
	
	mooluBM($$("idSlideView3"), {
			autoClose : false,
			defaultIndex : 0,
			min : 25,
			mode : "top",
			delay : 200,
			onShow : function(index){
				this._each(function(o, i){
					o.node.className = i == index ? "on" : "";
				});
			}
	});
	
})()
</script>
<script src="../../yaml/core/js/yaml-focusfix.js" type="text/javascript"></script>
</body>
</html>
